<template>
  <app-page class="home-page" :onRefresh="refresh">
    <view class="page">
      <view class="page-body">
        <view class="form-item" v-for="i in 5">
          <form-slider height="184rpx">
            <view class="body-item">
              <view class="tag">
                <view class="tag-name">张三{{i}}已认领</view>
              </view>
              <view class="left-icon">
                <image class="img" src="https://oss.suning.com/srcfews/lsywd/snmp-health/member/mum84.png"></image>
              </view>
              <view class="content">
                <view class="up">
                  <view class="data-label">血压</view>
                  <view class="data-value">120/40</view>
                  <view class="data-unit">mmHg</view>
                  <view class="data-warn">高血压</view>
                </view>
                <view class="down">
                  <view class="data-label">心率</view>
                  <view class="data-value">90</view>
                  <view class="data-unit">bpm</view>
                  <view class="data-time">2025-11-21 17:00:00</view>
                </view>
              </view>
            </view>
            <template v-slot:menu>
              <view style="display: flex;flex-direction: row;height: inherit">
                <view style="width: 160rpx; height: 100%;
          margin-left: 24rpx;
          background-color: #D4413F;
          font-size: 28rpx;
          color: #FFFFFF;
          text-align: center;
          font-weight: 500;
          display: flex;align-items: center;justify-content: center;"
                      @click="demoClick('删除' + i)">
                  删除1
                </view>

                <view style="width: 136rpx; height: 100%;
          background-color: #EB8029;
          font-size: 28rpx;
          color: #FFFFFF;
          text-align: center;
          font-weight: 500;
          display: flex;align-items: center;justify-content: center;"
                      @click="demoClick('更换认领' + i)">
                  更换认领1
                </view>
              </view>
            </template>
          </form-slider>
        </view>

        <!--      <form-picker defaultValue="2" :max-show-rows="5" :option-list="optionList" @change="change"></form-picker>-->
        <!--      <form-swiper>-->
        <!--      </form-swiper>-->
      </view>
    </view>
  </app-page>
</template>

<script lang="ts" setup>
const demoClick = (msg)=>{
  console.info("demoClick", msg)
}
const refresh = async ()=>{
  console.info("refresh start")
  await new Promise(resolve => setTimeout(resolve, 3000))
  console.info("refresh end")
}
</script>

<style lang="scss" scoped>

.page{
  background-color: var(--background-color);
}
.page-body{
  width: 702rpx;
  margin-left: 24rpx;
  .form-item{
    margin-bottom: 24rpx;
  }
}
.body-item{
  position: relative;
  box-sizing: border-box;
  height: 184rpx;
  width: 702rpx;
  background-color: #FFFFFF;
  border-radius: 24rpx;
  display: flex;
  flex-direction: row;
  .tag{
    position: absolute;
    height: 42rpx;
    top: 0;
    right: 0;
    background: #E9ECEE;
    border-radius: 0 24rpx 0 24rpx;
    padding-left: 24rpx;
    padding-right: 24rpx;

    .tag-name{
      font-size: 22rpx;
      color: #636668;
      letter-spacing: 0;
      text-align: right;
      font-weight: 400;
    }
  }

  .left-icon{
    width: 120rpx;
    height: 100%;
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .img{
      width: 84rpx;
      height: 84rpx;
    }
  }

  .content{
    width: 558rpx;
    height: 136rpx;
    border-radius: 0 24rpx 24rpx 0;
    margin-top: 24rpx;

    .up{
      width: 558rpx;
      height: 62rpx;
      display: flex;
      flex-direction: row;
      align-items: flex-end;
    }
    .down{
      margin-top: 12rpx;
      width: 558rpx;
      height: 62rpx;
      display: flex;
      flex-direction: row;
      align-items: flex-end;
    }
  }
}


.data-label{
  font-size: 26rpx;
  color: #212425;
  letter-spacing: 0;
  line-height: 36rpx;
  font-weight: 400;
}
.data-value{
  margin-left: 6rpx;
  font-size: 48rpx;
  color: #43CD7F;
  letter-spacing: 0;
  font-weight: 400;
}
.data-unit{
  margin-left: 6rpx;
  font-size: 26rpx;
  color: #636668;
  letter-spacing: 0;
  line-height: 36rpx;
  font-weight: 500;
}
.data-warn{
  margin-left: 6rpx;
  font-size: 26rpx;
  color: #EB8029;
  letter-spacing: 0;
  line-height: 36rpx;
  font-weight: 400;
}
.data-time{
  flex: 1;
  font-size: 26rpx;
  color: #919599;
  letter-spacing: 0;
  text-align: right;
  line-height: 36rpx;
  font-weight: 400;
}
</style>